<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div>
        <el-dialog :visible.sync="show" title="小程序基本设置" width="600px" v-loading="loading" element-loading-text="处理中，请稍等" :close-on-click-modal="false">
                <el-form label-position="top" label-width="200px">

                    <el-form-item>
                        <el-input placeholder="请填写小程序名称" v-model="xcx_name" />
                        <span slot="label" class="form-label">
                            <span class="red">*</span>
                            <span>小程序名称</span>
                            <el-popover placement="right-start" width="700" trigger="hover">
                                <div>程序名称将显示在发送给客户的短信通知文本中，以及其他需要的地方</div>
                                <el-button slot="reference" icon="el-icon-question" type="text" />
                            </el-popover>
                        </span>
                    </el-form-item>

                    <el-form-item label="AppID(小程序ID)">
                        <el-input v-model="xcx_app_id" min="18" max="18" />
                        <div class="help-text">进入"微信公众平台 - 开发 - 开发设置"查看</div>
                        <span slot="label" class="form-label">
                            <span class="red">*</span>
                            <span>AppID(小程序ID)</span>
                            <el-popover placement="right-start" width="700" trigger="hover">
                                <div>进入"微信公众平台 - 开发 - 开发设置"查看</div>
                                <el-image src="https://tcdn.udeve.net/assets/images/xcx_appid.jpg" />
                                <el-button slot="reference" icon="el-icon-question" type="text" />
                            </el-popover>
                        </span>
                    </el-form-item>
                    <el-form-item label="AppSecret(小程序密钥)">
                        <el-input v-model="xcx_secret" type="password" min="32" max="32"
                            show-password />

                        <div class="help-text">进入"微信公众平台 - 开发 - 开发设置"查看</div>
                        <span slot="label" class="form-label">
                            <span class="red">*</span>
                            <span>AppSecret(小程序密钥)</span>
                            <el-popover placement="right-start" width="700" trigger="hover">
                                <div>进入"微信公众平台 - 开发 - 开发设置"查看</div>
                                <el-image src="https://tcdn.udeve.net/assets/images/xcx_secret.jpg" />

                                <el-button slot="reference" icon="el-icon-question" type="text" />
                            </el-popover>
                        </span>
                    </el-form-item>
                    <el-form-item label="消息模板id">
                        <el-input
                            v-model="msg_tpl_id"
                            min="18"
                            max="18"
                        />
                        <div class="help-text">
                            <a href="https://doc.youdeyunke.com/xiaochengxudingyuexiaoxituisong.html" target="_blank">
                            如何设置消息推送模板，点击查看文档
                            </a>
                        </div>
                    </el-form-item>
                </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" icon="el-icon-close" @click="show = false">取消</el-button>
                <el-button size="small" icon="el-icon-check" type="primary" @click="submitBaseInfoConfig">保存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { initWeapp } from '@/api/myconfig';
import HelpIcon from "@/components/HelpIcon";
export default {
    components: {HelpIcon},
    computed: {
    },
    mounted() {
        this.xcx_app_id = this.$store.state.myconfig.xcx_app_id;
        this.xcx_secret = this.$store.state.myconfig.xcx_secret;
        this.xcx_name = this.$store.state.myconfig.xcx_name;
        this.msg_tpl_id = this.$store.state.myconfig.msg_tpl_id;
    },
    data() {
        return {
            xcx_name: '',
            xcx_app_id: '',
            xcx_secret: '',
            msg_tpl_id: '',
            show: false,
            loading: false,
        };
    },
    methods: {
        submitBaseInfoConfig(){
            if (!this.xcx_name) {
                this.$message.error('请填写小程序名称');
                return;
            }
            if (!this.xcx_app_id) {
                this.$message.error('请填写AppID(小程序ID)');
                return;
            }
            if (!this.xcx_secret) {
                this.$message.error('请填写AppSecret(小程序密钥)');
                return;
            }
            var data = {
                xcx_name: this.xcx_name,
                xcx_app_id: this.xcx_app_id,
                xcx_secret: this.xcx_secret,
                msg_tpl_id: this.msg_tpl_id
            }
            this.loading = true
            initWeapp(data).then((resp) => {
                this.loading = false
                if(resp.code != 0){
                    return
                }
                this.$message.success('保存成功')
                this.$store.dispatch("myconfig/loadMyconfig")
                this.show = false
            })
        },
        showdialog() {
            this.show = true
        }
    },
};
</script>

<style scoped>
.toast {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.toast i {
    color: #e29c40;
    font-size: 96px;
}

.toast-text {
    width: 400px;
    color: #e29c40;
    font-size: 14px;
    text-align: center;
    margin: 40px auto;
}
.form-label{
    display: flex;align-items: center;
}
.form-label span{
    margin-right: 8px;
}
.form-label .red{
    color: red;
}
</style>